<script setup lang="ts">
import { watch } from "vue";
import { useMainStore } from "../../store";
import { Modal as AModal } from "ant-design-vue";
const mainStore = useMainStore();
console.log("🚀 ~ mainStore:", mainStore.settingStatus);

watch(
  () => mainStore.settingStatus,
  (newVal) => {
    console.log("settingStatus changed to:", newVal);
    // 如果需要额外处理，可以在这里添加逻辑
  }
);
</script>

<template>
  <div class="modal-setting">
    <a-modal
      v-model:open="mainStore.settingStatus"
      width="500px"
      title="设置"
      :footer="null"
      get-container=".modal-setting"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
// :deep(.ant-modal-content .ant-modal-body) {
//   min-height: 500px !important;
// }
// .ant-modal-body {
//   background-color: aqua;
// }

// /* 确保所有相关样式都包含在 :deep() 中 */
// :v-deep(.ant-modal-content) {
//   .ant-modal-header {
//     background-color: #f0f0f0 !important; /* 示例：修改头部背景色 */
//   }
//   .ant-modal-footer {
//     display: none !important; /* 示例：隐藏底部 */
//   }
// }

// :where(.css-dev-only-do-not-override-3m4nqy).ant-modal .ant-modal-body {
//   min-height: 500px;
// }
</style>
<style lang="scss">
.modal-setting {
  .ant-modal-body {
    min-height: 300px !important;
  }
}
</style>
